<template>
        <div class="button-group">
             <button type="button" @click="leftBtnClick" :disabled="leftDisabled">&lt;</button>  
             <button type="button" @click="rightBtnClick" :disabled="rightDisabled">&gt;</button>  
        </div>
</template>
<script setup lang="ts">
defineProps({
  leftDisabled:{
    type:Boolean,
  },
  rightDisabled:{
    type:Boolean,
  }
})
const emit = defineEmits(['leftBtnClick', 'rightBtnClick'])
//点击左边的按钮
const leftBtnClick = () =>{
  emit('leftBtnClick')
}

//点击右边的按钮
const rightBtnClick = () =>{
  emit('rightBtnClick')
}


</script>
<style lang="scss" scoped>
.button-group {
  display: flex;
  justify-content: center;
  align-items: center;

  button {
    border: none;
    outline: none;
    width: 30px;
    height: 30px;
    background-color: #a0cfff;
    color: #fff;
    border-radius: 5px;

    &:disabled {
      opacity: 0.6;
    }

    &:nth-child(2) {
      margin-left: 10px;
    }
  }
}
</style>